<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../semantic/dist/semantic.min.css">
    <title>semantic-ui-practice</title>
    <style>

    </style>
</head>

<body>
    <div class="ui container" style="padding-bottom: 300px;">
        <div class="ui dividing header">Practice</div>

        <div class="ui button">Button</div>
        <div class="ui labeled button">
            <div class="ui button">
                <i class="heart icon"></i>
            </div>
            <div class="ui label">1,024</div>
        </div>

        <button class="ui animated button">
            <div class="visible content">s</div>
            <div class="hidden content">S</div>
        </button>

        <div class="ui pink labled icon button">
            <i class="heart icon"></i> Like
        </div>

        <div class="ui divider"></div>

        <div class="ui input">
            <input type="text" placeholder="搜索">
        </div>
        <div class="ui icon input">
            <input type="text" placeholder="搜索">
            <i class="green inverted circular search icon"></i>
        </div>

        <div class="ui divider"></div>

        <div class="ui three small steps">
            <div class="ui step">
                <i class="truck icon"></i>
                <div class="content">
                    <div class="title">配送</div>
                    <div class="description">选择配送方式</div>
                </div>
            </div>
            <div class="ui active step">
                <i class="payment icon"></i>
                <div class="content">
                    <div class="title">支付</div>
                    <div class="description">选择支付方式</div>
                </div>
            </div>
            <div class="ui disabled step">
                <i class="info icon"></i>
                <div class="content">
                    <div class="title">确认</div>
                    <div class="description">确定订单信息</div>
                </div>
            </div>
        </div>

        <div class="ui divider"></div>

        <div class="ui small circular rotate reveal image">
            <img src="http://app.wingca.com/static/images/chose-school.png" alt="" class="visible content">

            <img src="http://app.wingca.com/static/images/get-service.png" alt=""  class="hidden content">
        </div>

        <div class="ui divider"></div>

        <div class="ui four column doubling cards">
            <div class="card">
                <div class="image"><img src="https://semantic-ui.com/images/avatar/large/stevie.jpg" alt=""></div>
                <div class="content">
                    <div class="header">我是一个女人</div>
                    <div class="meta">
                        <span>I'm a women</span>
                        <div class="description">我生气的时候喜欢吃东西</div>
                    </div>
                </div>
                <div class="extra content">
                    <div class="left floated"><i class="heart icon"></i>喜欢</div>
                    <div class="right floated"><i class="user icon"></i>好友</div>
                </div>
            </div>
            <div class="card">
                <div class="image"><img src="https://semantic-ui.com/images/avatar/large/stevie.jpg" alt=""></div>
                <div class="content">
                    <div class="header">我是一个女人</div>
                    <div class="meta">
                        <span>I'm a women</span>
                        <div class="description">我生气的时候喜欢吃东西</div>
                    </div>
                </div>
                <div class="extra content">
                    <div class="left floated"><i class="heart icon"></i>喜欢</div>
                    <div class="right floated"><i class="user icon"></i>好友</div>
                </div>
            </div>
            <div class="card">
                <div class="image"><img src="https://semantic-ui.com/images/avatar/large/stevie.jpg" alt=""></div>
                <div class="content">
                    <div class="header">我是一个女人</div>
                    <div class="meta">
                        <span>I'm a women</span>
                        <div class="description">我生气的时候喜欢吃东西</div>
                    </div>
                </div>
                <div class="extra content">
                    <div class="left floated"><i class="heart icon"></i>喜欢</div>
                    <div class="right floated"><i class="user icon"></i>好友</div>
                </div>
            </div>
            <div class="card">
                <div class="image"><img src="https://semantic-ui.com/images/avatar/large/stevie.jpg" alt=""></div>
                <div class="content">
                    <div class="header">我是一个女人</div>
                    <div class="meta">
                        <span>I'm a women</span>
                        <div class="description">我生气的时候喜欢吃东西</div>
                    </div>
                </div>
                <div class="extra content">
                    <div class="left floated"><i class="heart icon"></i>喜欢</div>
                    <div class="right floated"><i class="user icon"></i>好友</div>
                </div>
            </div>
        </div>

        <div class="ui divider"></div>

        <div class="ui feed">
            <div class="event">
                <div class="label"><img src="https://semantic-ui.com/images/avatar/large/stevie.jpg" alt=""></div>
                <div class="content">
                    <div class="summary">
                        <div class="user">不如跳舞</div>
                        <div class="date">1 小时之前</div>
                    </div>
                    <div class="meta">
                        <div class="like">
                            <i class="heart icon"></i>
                            喜欢
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui feed">
            <div class="event">
                <div class="label"><img src="https://semantic-ui.com/images/avatar/large/stevie.jpg" alt=""></div>
                <div class="content">
                    <div class="summary">
                        <div class="user">不如跳舞</div>
                        <div class="date">1 小时之前</div>
                    </div>
                    <div class="extra text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis id provident eius ipsum nostrum sequi, iste explicabo neque consequuntur odio nulla dicta, quae modi aliquam odit voluptates vero porro natus.</div>
                    <div class="meta">
                        <div class="like">
                            <i class="heart icon"></i>
                            喜欢
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui feed">
            <div class="event">
                <div class="label"><img src="https://semantic-ui.com/images/avatar/large/stevie.jpg" alt=""></div>
                <div class="content">
                    <div class="summary">
                        <div class="user">不如跳舞</div>
                        <div class="date">1 小时之前</div>
                    </div>
                    <div class="extra images">
                        <img src="https://semantic-ui.com/images/avatar/large/stevie.jpg" alt="">
                        <img src="https://semantic-ui.com/images/avatar/large/stevie.jpg" alt="">
                    </div>
                    <div class="meta">
                        <div class="like">
                            <i class="heart icon"></i>
                            5 个👍
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui divider"></div>

        <div class="ui statistics">
            <div class="ui horizontal statistic">
                <div class="value">1,024</div>
                <div class="label">点赞</div>
            </div>
            <div class="ui horizontal statistic">
                <div class="value">2,048</div>
                <div class="label">收藏</div>
            </div>
        </div>

        <div class="ui divider"></div>

        <div class="ui icon info message">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam molestias placeat odio corrupti deleniti, aut magnam porro eum. Similique, sit! Odio possimus ab accusamus libero inventore deserunt quisquam temporibus soluta.</p>
            <i class="close icon"></i>
        </div>

        <div class="ui divider"></div>

        <table class="ui selectable center aligned celled table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>昵称</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>李阳</td>
                    <td>Honest</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李羊</td>
                    <td>LiYang</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>

        <div class="ui divider"></div>

        <form action="" class="ui form">
            <div class="two fields">
                <div class="field">
                    <label for="">用户名</label>
                    <input type="text" placeholder="搜索">
                </div>
                <div class="field">
                    <label for="">密码</label>
                    <input type="text" placeholder="搜索">
                </div>
            </div>
        </form>

        <div class="ui divider"></div>

        <div class="ui secondary pointing menu">
            <div class="active item"> 首页 </div>
            <div class="item"> 产品 </div>
            <div class="item"> 关于 </div>
            <div class="item">
                <div class="ui basic inverted icon input">
                    <input type="text" placeholder="搜索..">
                    <i class="search icon"></i>
                </div>
            </div>
            <div class="right item"> 注册 </div>
        </div>

        <div class="ui divider"></div>

        <div class="ui threaded comments">
            <div class="comment">
                <a class="avatar">
                    <img src="https://semantic-ui.com/images/avatar/large/stevie.jpg" alt="">
                </a>
                <div class="content">
                    <a class="author">天涯</a>
                    <div class="metadata"> 1 小时之前</div>
                    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quisquam necessitatibus voluptates ex error. Sunt dolorem velit quisquam aperiam, minima blanditiis maxime, reprehenderit. Rerum distinctio, ipsa, quidem at earum sint.</div>
                    <div class="actions"><a>回复</a></div>
                </div>
                <div class="comments">
                    <div class="comment">
                        <a class="avatar">
                            <img src="https://semantic-ui.com/images/avatar/large/stevie.jpg" alt="">
                        </a>
                        <div class="content">
                            <a class="author">天涯</a>
                            <div class="metadata"> 1 小时之前</div>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quisquam necessitatibus voluptates ex error. Sunt dolorem velit quisquam aperiam, minima blanditiis maxime, reprehenderit. Rerum distinctio, ipsa, quidem at earum sint.</div>
                            <div class="actions"><a>回复</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui divider"></div>

        <div class="ui very relaxed divided items">
            <div class="item">
                <div class="image"><img src="https://semantic-ui.com/images/avatar/large/stevie.jpg" alt=""></div>
                <div class="middle aligned content">
                    <div class="header">今天心情不错</div>
                    <div class="meta"><span> 1 小时之前</span></div>
                    <div class="description">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla atque beatae impedit, excepturi dolor quos iusto fugiat laboriosam unde possimus sint officia voluptatibus laudantium sunt optio rem aut nostrum et.</p>
                    </div>
                    <div class="extra"><i class="heart icon"></i>喜欢</div>
                </div>
            </div>
        </div>

        <div class="ui divider"></div>

        <div class="ui grid">
            <div class="four column row">
                <div class="column">
                    <div class="ui piled segment">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui a tempora repellendus incidunt accusantium ullam, earum fugit provident eum ipsam facilis cum, veritatis totam! Temporibus impedit perspiciatis itaque officia asperiores.</p>
                    </div>
                </div>
                <div class="column">
                    <div class="ui piled segment">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui a tempora repellendus incidunt accusantium ullam, earum fugit provident eum ipsam facilis cum, veritatis totam! Temporibus impedit perspiciatis itaque officia asperiores.</p>
                    </div>
                </div>
                <div class="column">
                    <div class="ui piled segment">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui a tempora repellendus incidunt accusantium ullam, earum fugit provident eum ipsam facilis cum, veritatis totam! Temporibus impedit perspiciatis itaque officia asperiores.</p>
                    </div>
                </div>
                <div class="column">
                    <div class="ui piled segment">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui a tempora repellendus incidunt accusantium ullam, earum fugit provident eum ipsam facilis cum, veritatis totam! Temporibus impedit perspiciatis itaque officia asperiores.</p>
                    </div>
                </div>
                <div class="column">
                    <div class="ui piled segment">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui a tempora repellendus incidunt accusantium ullam, earum fugit provident eum ipsam facilis cum, veritatis totam! Temporibus impedit perspiciatis itaque officia asperiores.</p>
                    </div>
                </div>
                <div class="column">
                    <div class="ui piled segment">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui a tempora repellendus incidunt accusantium ullam, earum fugit provident eum ipsam facilis cum, veritatis totam! Temporibus impedit perspiciatis itaque officia asperiores.</p>
                    </div>
                </div>
                <div class="column">
                    <div class="ui piled segment">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui a tempora repellendus incidunt accusantium ullam, earum fugit provident eum ipsam facilis cum, veritatis totam! Temporibus impedit perspiciatis itaque officia asperiores.</p>
                    </div>
                </div>
                <div class="column">
                    <div class="ui piled segment">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui a tempora repellendus incidunt accusantium ullam, earum fugit provident eum ipsam facilis cum, veritatis totam! Temporibus impedit perspiciatis itaque officia asperiores.</p>
                    </div>
                </div>
            </div>
        </div>

    </div>




    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../semantic/dist/semantic.min.js"></script>
    <script></script>
</body>

</html>
